<template style="backgroundcolor: #f8fafd">
  <div>
    <el-row style="display: flex">
      <el-col :span="18" style="padding: 0 10px">
        <el-row>
          <el-col
            :span="13"
            style="height: 166px; display: flex; padding: 0 10px"
          >
            <Task title="工单统计" date>
              <TaskItem label="工单总数（个）" :total="total" />
              <TaskItem label="完成工单（个）" :total="completedTotal" />
              <TaskItem label="进行工单（个）" :total="progressTotal" />
              <TaskItem label="取消工单（个）" :total="cancelTotal" />
            </Task>
          </el-col>
          <el-col
            :span="11"
            style="height: 166px; display: flex; padding: 0 10px"
          >
            <Task title="销售统计" date>
              <TaskItem label="订单量（个）" :total="orderCount" />
              <TaskItem label="销售额（万元）" :total="amount" />
            </Task>
          </el-col>
        </el-row>
        <div class="box" style="height: 352px; display: flex; margin: 20px 0 0">
          <Task title="销售数据" date>
            <div class="week-month-year" v-active slot="tool">
              <div class="item is-checked" @click="checkoutWeek">周</div>
              <div class="item" @click="checkoutMonth">月</div>
              <div class="item" @click="checkoutYear">年</div>
            </div>
            <div class="chart" ref="chart1"></div>
            <div class="chart" ref="chart2"></div>
          </Task>
        </div>
      </el-col>
      <el-col :span="6" style="display: flex; padding: 0 10px">
        <Task title="商品热榜" date colum>
          <template v-for="(i, k) in sukTopList">
            <SkuTop :key="k" :top="k + 1" :title="i.skuName" :count="i.count" />
          </template>
        </Task>
      </el-col>
    </el-row>
    <el-row style="margin-left: -10px; margin-right: -10px; margin-top: 20px">
      <el-col :span="14" style="height: 353px; display: flex; padding: 0 10px">
        <Task title="合作商点位数Top5">
          <i class="el-icon-chat-dot-round" slot="tool"></i>
          <el-row style="flex: 1">
            <el-col :span="17" style="height: 100%">
              <div class="chart" ref="chart" style="height: 100%"></div>
            </el-col>
            <el-col :span="7" style="height: 100%">
              <div class="collect">
                <div class="count">{{ nodeCount }}</div>
                <div class="name">点位数</div>
                <div class="count count2">{{ partnerCount }}</div>
                <div class="name">合作商数</div>
              </div>
            </el-col>
          </el-row>
        </Task>
      </el-col>
      <el-col :span="10" style="height: 353px; display: flex; padding: 0 10px">
        <Task title="异常设备监控">
          <i class="el-icon-chat-dot-round" slot="tool"></i>
        </Task>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Task from '@/components/task'
import TaskItem from '@/components/task-item'
import SkuTop from './components/sku-top.vue'
import { taskReportInfo } from '@/api/work'
import {
  getOrderCount,
  getOrderAmount,
  getSkuTop,
  getOrderAmountCollect,
  getRegionCollect,
  getNodeCollect,
  getNodeCount,
  getPartnerCount
} from '@/api/order'
import moment from 'moment'
import * as echarts from 'echarts'
import { amountCollect, ChartOpt, regionCollect } from './echarts'
export default {
  name: 'home-page',
  data() {
    return {
      datePart: {
        start: '',
        end: ''
      },
      sukTopList: [],
      // 工作统计
      total: 0,
      completedTotal: 0,
      progressTotal: 0,
      cancelTotal: 0,
      // 订单额
      orderCount: 0,
      orderAmount: 0,
      amount: 0,
      partnerCount: 0,
      nodeCount: 0,
      // 销售额数据图
      orderList: [],
      // 区域销售数据图
      regionList: [],
      partnerList: [],
      echart1: {},
      echart2: {}
    }
  },
  components: {
    Task,
    TaskItem,
    SkuTop
  },
  computed: {},
  methods: {
    // 工单数据
    async getTaskReaport() {
      const res = await taskReportInfo(this.datePart.start, this.datePart.end)
      this.total = res.reduce((t, i) => t + i.total, 0)
      this.completedTotal = res.reduce((t, i) => t + i.completedTotal, 0)
      this.progressTotal = res.reduce((t, i) => t + i.progressTotal, 0)
      this.cancelTotal = res.reduce((t, i) => t + i.cancelTotal, 0)
    },
    // 开始日期
    dateStar() {
      this.datePart.start = moment().weekday(-7).format('YYYY-MM-DD 00:00:00')
    },
    // 结束日期
    dateEnd() {
      this.datePart.end = moment().format('YYYY-MM-DD 23:59:59')
    },
    // 订单数
    async getOrderCount() {
      const res = await getOrderCount(this.datePart)
      this.orderCount = Number.parseInt(res)
    },
    // 销售额
    async getOrderAmount() {
      const res = await getOrderAmount(this.datePart)
      const num = Number.parseInt(res) / 1000000
      this.amount = num.toFixed(2)
    },
    async getSkuTop() {
      const s = this.datePart.start.slice(0, 10)
      const e = this.datePart.end.slice(0, 10)
      const res = await getSkuTop(10, s, e)
      this.sukTopList = res
    },
    // 销售数据
    async getOrderAmountCollect() {
      const s = this.datePart.start.slice(0, 10)
      const e = this.datePart.end.slice(0, 10)
      const res = await getOrderAmountCollect(1, s, e)
      this.orderList = res
    },
    // 区域销售量
    async getRegionCollect() {
      const s = this.datePart.start.slice(0, 10)
      const e = this.datePart.end.slice(0, 10)
      const res = await getRegionCollect(s, e)
      this.regionList = res
    },
    // 合作商点数
    async getNodeCollect() {
      const res = await getNodeCollect()
      this.partnerList = res
    },
    // 合作商总点数
    async getNodeCount() {
      const res = await getNodeCount()
      this.nodeCount = res
    },
    // 合作商数量
    async getPartnerCount() {
      const res = await getPartnerCount()
      this.partnerCount = res
    },
    // echart初始化
    initOrderChart() {
      // 销售数据
      this.echart1 = echarts.init(this.$refs.chart1)
      this.echart1.setOption(amountCollect(this.orderList))
    },
    initRegionChart() {
      // 销售区域分布
      this.echart2 = echarts.init(this.$refs.chart2)
      this.echart2.setOption(regionCollect(this.regionList))
    },
    initPartnerChart() {
      // 合作商
      const chart = echarts.init(this.$refs.chart)
      chart.setOption(ChartOpt(this.partnerList))
    },
    async checkoutWeek() {
      this.datePart.start = moment().weekday(-7).format('YYYY-MM-DD 00:00:00')
      await this.getRegionCollect()
      await this.getOrderAmountCollect()
      this.echart1.setOption(amountCollect(this.orderList))
      this.echart2.setOption(regionCollect(this.regionList))
    },
    async checkoutMonth() {
      this.datePart.start = moment().format('YYYY-MM-01 00:00:00')
      await this.getRegionCollect()
      await this.getOrderAmountCollect()
      this.echart1.setOption(amountCollect(this.orderList))
      this.echart2.setOption(regionCollect(this.regionList))
    },
    async checkoutYear() {
      this.datePart.start = moment().format('YYYY-01-01 00:00:00')
      await this.getRegionCollect()
      await this.getOrderAmountCollect()
      this.echart1.setOption(amountCollect(this.orderList))
      this.echart2.setOption(regionCollect(this.regionList))
    }
  },
  created() {
    this.dateStar()
    this.dateEnd()
    this.getTaskReaport()
    this.getOrderCount()
    this.getOrderAmount()
    this.getSkuTop()
    this.getNodeCount()
    this.getPartnerCount()
  },
  async mounted() {
    await this.getRegionCollect()
    await this.getOrderAmountCollect()
    await this.getNodeCollect()
    this.initOrderChart()
    this.initRegionChart()
    this.initPartnerChart()
  }
}
</script>

<style scoped lang="scss">
.chart {
  flex: 1;
}
.collect {
  width: 154px;
  height: 230px;
  padding-top: 47px;
  padding-left: 38px;
  background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0,
    linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0,
    linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%,
    linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  .count {
    height: 33px;
    font-size: 24px;
    font-weight: 600;
    color: #072074;
    line-height: 33px;
  }
  .name {
    height: 17px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 400;
    color: #000412;
    line-height: 17px;
  }
  .count2 {
    margin-top: 20px;
  }
}
.week-month-year {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 34px;
  background: rgba(233, 243, 255, 0.37);
  border-radius: 10px;
  padding: 0 5px;
  .item {
    height: 25px;
    padding: 0 12px;
    font-size: 14px;
    color: #9ca3b4;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .item.is-checked {
    background: #fff;
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
    border-radius: 7px;
    font-weight: 600;
    color: #333;
  }
}
</style>
